<template>
  <div class="yingxin_manage">
    <div class="yingxin_manage_content">
      <div class="search_wrap">
        <el-select
          v-if="this.myUser.roleid == 1"
          v-model="query.conditions.deptid"
          placeholder="选择院系"
          clearable
        >
          <el-option
            v-for="item in DeptList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          v-if="this.myUser.roleid == 1"
          v-model="query.conditions.approver"
          placeholder="审批人学号"
          clearable
        ></el-input>
        <el-input
          v-model="query.conditions.creatorname"
          placeholder="申请人姓名"
          clearable
        ></el-input>
        <el-input
          v-model="query.conditions.creator"
          placeholder="申请人学号"
          clearable
        ></el-input>
        <el-date-picker
          v-model="query.conditions.starttime"
          type="date"
          placeholder="提交起始日期"
        >
        </el-date-picker>

        <el-date-picker
          v-model="query.conditions.endtime"
          type="date"
          placeholder="提交结束日期"
        >
        </el-date-picker>
        <el-select
          v-model="query.conditions.isstandcome"
          placeholder="单独入校"
        >
          <el-option
            v-for="item in isstandcome"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="query.conditions.status" placeholder="主流程状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="query.conditions.status == 1"
          v-model="query.conditions.curapply"
          placeholder="当前审批"
        >
          <el-option
            v-for="item in currentapply"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="query.conditions.apprresult"
          v-if="myUser.roleid!=1&&query.conditions.status == 1"
          placeholder="审批结果"
        >
          <el-option
            v-for="item in apprresultOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

         <el-select
          v-model="query.conditions.late"
          placeholder="超期晚归"
        >
          <el-option
            v-for="item in late"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
         <el-select
          v-model="query.conditions.abnormal"
          placeholder="体征异常人群"
        > 
         <el-option
            v-for="item in abnormal"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> 
        <el-input
          v-model="query.conditions.visit"
          placeholder="造访地"
          clearable
        ></el-input>
        <el-button @click="searchHandle" type="primary">搜索</el-button>
        <el-button @click="clearHandle" type="primary">清空</el-button>
      </div>
      <div class="search_wrap">
        <el-button @click="ApproveExcel" type="warning">数据导出</el-button>
      </div>

      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          stripe
          class="my_table"
        >
          <el-table-column fixed prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="sno" label="学号"> </el-table-column>
          <el-table-column prop="leavetype" label="请假类型" width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.leavetype">{{ scope.row.leavetype }}</span>
              <span v-else>------</span>
            </template>
          </el-table-column>
          <el-table-column label="当前进度" width="100">
            <template slot-scope="scope">
              <span>{{ getApplyType(scope.row.curapply) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前状态">
            <template slot-scope="scope">
              <span>{{ getShenPi(scope.row.stepstatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单独入校" width="100">
            <template slot-scope="scope">
              <span>{{ getIsstandcomeType(scope.row.isstandcome) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="starttime" label="开始时间" width="180">
          </el-table-column>
          <el-table-column prop="endtime" label="结束时间" width="180">
          </el-table-column>
          <el-table-column prop="cometime" label="入校时间" width="180">
          </el-table-column>
          <el-table-column prop="realcometime" label="实际入校时间" width="180">
          </el-table-column>
          <el-table-column prop="createtime" label="申请时间" width="180">
          </el-table-column>
          <el-table-column prop="deptname" label="院系"> </el-table-column>
          <el-table-column prop="syndeptname" label="一卡通部门" width="120">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button
                @click="goDetail(scope.row)"
                type="primary"
                size="small"
                ><i class="el-icon-document"></i> 详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="pagination_wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageinfo.pageindex"
          :page-size="query.pageinfo.pagesize"
          background
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingxin_manage",
  data() {
    return {
      tableData: [],
      tableData2: [], //导出数据
      apprresultOptions: [
        {
          //已审批、待审批
          value: 0,
          label: "审批结果(全部)",
        },
        {
          value: 1,
          label: "待我审批",
        },
        {
          value: 2,
          label: "院系已审批",
        },
      ],
      statusOptions: [
        {
          //主流程 状态：只能传 1：正在审批、2：已完成、3：无效的、作废/取消
          value: 0,
          label: "主流程状态(全部)",
        },
        {
          value: 1,
          label: "正在审批",
        },
        {
          value: 2,
          label: "已完成",
        },
        {
          value: 3,
          label: "无效审批",
        },
        {
          value: 4,
          label: "已完结",
        },
      ],
      //单独入校申请
      isstandcome: [
        {
          value: "",
          label: "是否单独入校(全部)",
        },
        {
          value: 1,
          label: "单独入校",
        },
        {
          value: 0,
          label: "非单独入校",
        },
      ],
      //是否晚归
      late:[
        {
          value: 0,
          label: "是否超期晚归(全部)",
        },
        {
          value: 1,
          label: "超期晚归",
        },
      ],
      //体征异常人群
      abnormal:[
        {
          value: 0,
          label: "体征表现(全部)",
        },
        {
          value: 1,
          label: "异常人群",
        },
      ],
      DeptList: [],
      page: 1,
      size: 10,

      userInfo: {
      },
      total: 0,

      applyTypeList: [
        {
          value: 1,
          label: "请假申请",
        },
        {
          value: 2,
          label: "入校申请",
        },
        {
          value: 3,
          label: "销假申请",
        },
        {
          value: 4,
          label: "完成",
        },
        {
          value: 5,
          label: "作废",
        },
        {
          value: 6,
          label: "取消",
        },
      ],
      //审批状态1保存，2审批中，3审批完成，4审批拒绝
      shenpiStatus: [
        {
          value: 1,
          label: "取消",
        },
        {
          value: 2,
          label: "审批中",
        },
        {
          value: 3,
          label: "审批完成",
        },
        {
          value: 4,
          label: "审批拒绝",
        },
        {
          value: 5,
          label: "作废",
        },
      ],
      //当前申请
      currentapply: [
        {
          value: 0,
          label: "当前申请(全部)",
        },
        {
          value: 1,
          label: "请假",
        },
        {
          value: 2,
          label: "入校",
        },
        {
          value: 3,
          label: "销假",
        },
      ],
      renzhengMethods: "", //认证方式  1,人脸识别 2,证件号查询 3,后台操作

      query: {
        pageinfo: {
          pageindex: 1,
          pagesize: 10,
          orders: "",
        },
        conditions: {
          apprresult: 0, //1：本院系待审批过得、2：本院系审批审批过得、
          acceptrole: 0, //roleid 不用传
          approver: "", //审批人学号
          status: 1,
          //主流程 状态：只能传 1：正在审批、2：已完成、3：无效的、作废/取消
          substate: [
            //子流程审批 状态： 只能传 1：取消、 2：正在审批、3：已完成、4：拒绝、5:作废
          ],
          starttime: "", //创建申请的开始时间
          endtime: "", //创建申请的结束时间
          deptid: "", //
          creator: "", //申请人学号
          creatorname: "", //申请人姓名 模糊搜索
          id: "", //
          curapply: 0, //1：当前正在进行的请假、2：当前正在进行的入校、3：当前正在进行的销假
          isstandcome: "", //'': 所有，0：否，1：是单独入校
          late:0,
          abnormal:0,
          visit:"",
        },
      },
      myUser: {},
    };
  },
  created() {
    let that = this;
    that.GetTaleList();
    that.getOrganizationList();

    let my_user = localStorage.getItem("my_user");
    if (my_user) {
      this.myUser = JSON.parse(my_user);
      console.log(this.myUser,'AAAAAAAAAAA')
      this.query.conditions.deptid = this.myUser.curdeptid;
    }
  },
  watch:{
      query: {
        handler(newName, oldName) {          
          console.log(newName);
          if(newName.conditions.status!=1){
            this.query.conditions.apprresult=0;
            this.query.conditions.curapply=0;
          }          
          if(newName.conditions.apprresult==1){
            this.query.conditions.acceptrole=this.myUser.roleid;
          }else{
            this.query.conditions.acceptrole=0;
          }
        },
        deep: true
      }
  },

  methods: {
    ApproveExcel() {
      let that = this;
      that.apiAxiosBlob("/Approve/ApproveExcel", that.query).then((res) => {
        let a = document.createElement("a");
        a.style.display = "none";

        // 对象 URL 绑定到 a 标签上
        a.href = window.URL.createObjectURL(new Blob([res]));
        // 给 a 标签添加 download 属性 与 文件名
        a.setAttribute(
          "download",
          `数据报表${new Date().toLocaleString()}.xlsx`
        );

        // 把 a 标签挂载到 dom 树上并执行 a 标签的 click 事件
        document.body.appendChild(a);
        a.click();

        // 释放我们创建的 url 和 a 标签
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
      });
    },
    //请假类型
    getApplyType(val) {
      let arr = this.applyTypeList;
      for (let i = 0; i < arr.length; i++) {
        if (val == arr[i].value) {
          return arr[i].label;
        }
      }
    },
    //单独入校
    getIsstandcomeType(val) {
      let arr = this.isstandcome;
      for (let i = 0; i < arr.length; i++) {
        if (val === arr[i].value) {
          return arr[i].label;
        }
      }
    },
    getShenPi(val) {
      let arr = this.shenpiStatus;
      for (let i = 0; i < arr.length; i++) {
        if (val == arr[i].value) {
          return arr[i].label;
        }
      }
    },
    //获取表格数据
    GetTaleList() {
      let that = this;
      if(this.myUser.roleid==1)
      {
        that.query.conditions.acceptrole=0;
        that.query.conditions.apprresult= 0;
      }
      that.postAxios("/Approve/AllApprovings", that.query).then((res) => {
        if (res.code == 0) {
          that.tableData = res.page.data;
          that.total = res.page.count;
        }
      });
    },
    handleSizeChange(val) {
      this.query.pageinfo.pagesize = val;
      this.GetTaleList();
    },
    handleCurrentChange(val) {
      this.query.pageinfo.pageindex = val;
      this.GetTaleList();
    },
    searchHandle() {
      this.GetTaleList();
    },
    clearHandle(){
      this.query.conditions.apprresult= 0; //1：本院系待审批的、2：本院系审批审批过的、
      this.query.conditions.acceptrole= 0; //roleid 不用传
      this.query.conditions.approver= ""; //审批人学号
      this.query.conditions.status= 1;
//主流程 状态：只能传 1：正在审批、2：已完成、3：无效的、作废/取消
      this.query.conditions.substate= [];
  //子流程审批 状态： 只能传 1：取消、 2：正在审批、3：已完成、4：拒绝、5:作废
      this.query.conditions. starttime= ""; //创建申请的开始时间
      this.query.conditions.endtime= ""; //创建申请的结束时间
      this.query.conditions.deptid= ""; //
      this.query.conditions.creator= ""; //申请人学号
      this.query.conditions.creatorname= ""; //申请人姓名 模糊搜索
      this.query.conditions.id= ""; //
      this.query.conditions.curapply= 0; //1：当前正在进行的请假、2：当前正在进行的入校、3：当前正在进行的销假
      this.query.conditions.isstandcome= ""; //'': 所有，0：否，1：是单独入校
      this.query.conditions.late= 0; //0: 是否晚归
      this.query.conditions.abnormal= 0; //0:是否异常 
      this.query.conditions.visit= ""; //造访地
    },
    goDetail(item) {
      this.$router.push({
        path: "/applydetail",
        query: {
          apprmainid: item.id,
        },
      });
    },
    //所有院系集合
    getOrganizationList() {
      let that = this;
      that.postAxios("/Organization/List", null).then((res) => {
        if (res.code == 0) {
          that.DeptList = res.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.yingxin_manage {
  height: 100%;
  /*background: #215386;
		padding: 0 15px;
		box-sizing: border-box;*/
  width: 100%;
}

.yingxin_manage_content {
  .tab_wrap {
    padding: 6px;
    display: flex;
    justify-content: flex-end;
    .van-button.active {
      color: #409eff;
    }
    .r_info {
      color: #fff;
      font-size: 14px;
    }
  }
  .search_wrap {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .search_wrap .el-input,
  .search_wrap .el-select {
    width: 200px;
    margin: 5px 10px 5px 0;
    /*margin: 0 10px 10px 0;*/
  }
  .search_wrap .el-button {
    /*margin: 0 10px 10px 0;*/
  }
  .my_table {
    .no_authorization {
      color: darkgoldenrod;
    }
    .success_authorization {
      color: #07c160;
    }
    .photo_img {
      /*width: 80px;*/
      height: 80px;
      img.el-image__inner {
        width: auto;
        height: 100%;
      }
    }
  }
  .pagination_wrap {
    background: #fff;
    padding: 30px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>

<!--<style type="text/css" lang="scss">
	.photo_img {
		height: 80px;
		img.el-image__inner {
			width: auto;
			height: 100%;
		}
	}
</style>-->